<template>
	<view>
		<z-paging ref="paging" v-model="dataList" @query="queryList">
			<template #top>
				<view class="status_bar"></view>
			</template>
			<view class="item" v-for="(item, index) in dataList" :key="index" @click="itemClick(item)">
				<image :src="item.headPicUrl" mode="aspectFill"></image>
				<view class="content">
					<view class="nick">
						<view>{{item.nick}}</view>
						<image v-if="item.sex == 2" mode="scaleToFill"
							style="width:20rpx; height: 20rpx; margin-left: 10rpx;" :src="$getImageUrl('sex_girl.png')">
						</image>
						<image v-if="item.sex == 1" mode="scaleToFill"
							style="width:20rpx; height: 20rpx; margin-left: 10rpx;" :src="$getImageUrl('sex_boy.png')">
						</image>
					</view>
					<view>
						<text class="title">{{item.genius}}</text>
					</view>
					<text class="sub-title">{{item.sign}}</text>
					<view class="bottom">
						<view class="bottom-item">
							<view>
								<text class="big">{{item.score}}</text>分
							</view>
							<view style="color: #9097C7;">最近服务1人</view>
						</view>
						<view class="bottom-item">
							<view>
								<text class="big">{{item.money}}</text>/景点
							</view>
							<view style="color: #9097C7;">每小时</view>
						</view>
					</view>
				</view>
			</view>

			<template #bottom>
				<image :src="$getImageUrl('ic_release.png')" class="release" @click="toRelease"></image>
			</template>
		</z-paging>

	</view>

</template>


<script lang="ts" setup>
	import RouteUtil from '@/common/RouteUtil';
	import CacheUtil from '@/common/CacheUtil';
	import {ref } from "vue";

	const dataList = ref([]);
	const paging = ref(null)
	
	const queryList = async (pageNo:number, pageSize) => {
		if (CacheUtil.getLogin()) {
			const params = {
				pageNo: pageNo,
			}
			uni.$http.get("/api/apiAppTrip/getAppTripList", params)
				.then((res:any) => {
					paging.value?.complete(res.data)
				}).catch(res => {
					paging.value.complete(false)
				})
		}
	}
	
	const itemClick = (item:any)=>{
		RouteUtil.toGameDetail(item)
	}
	const toRelease = ()=>{
		RouteUtil.toGameRelease()
	}
</script>

<style lang="scss" scoped>
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.release {
		position: absolute;
		bottom: 30rpx;
		right: 30rpx;
		width: 100rpx;
		height: 100rpx;
		z-index: 99;
	}

	.item {
		display: flex;
		flex-direction: row;
		width: 100wh;
		box-sizing: border-box;
		background-color: #26252B;
		border-radius: 10rpx;
		margin: 20rpx;
		padding: 20rpx;
		align-items: center;

		image {
			width: 260rpx;
			height: 180rpx;
			border-radius: 20rpx;
		}

		.content {
			flex: 1;
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;

			.nick {
				display: flex;
				flex-direction: row;
				align-items: center;
				font-size: 28rpx;
				color: #fff;
			}

			.title {
				display: inline;
				background-image: linear-gradient(to right, #ffedd5, #fdd0a2);
				border-radius: 10rpx;
				padding: 10rpx 10rpx;
				font-size: 15rpx;
				color: #E7166B;
				margin-top: 15rpx;
			}

			.sub-title {
				font-size: 15rpx;
				color: #888;
				margin-top: 15rpx;
			}

			.bottom {
				display: flex;
				flex-direction: row;
				margin-top: 10rpx;

				.bottom-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					background-color: rgba(200, 205, 220, 0.5);
					border-radius: 10rpx;
					padding: 10rpx;
					margin-right: 20rpx;
					font-size: 12rpx;
					color: #222;

					.big {
						font-size: 24rpx;
						font-weight: bold;
					}
				}
			}
		}
	}
</style>